<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
          name="viewport"/>
    <link href="./css/font.css" rel="stylesheet">
    <link href="./css/xadmin.css" rel="stylesheet">
    <link href="./css/bootstrap.css" rel="stylesheet">
    <script charset="utf-8" src="./lib/layui/layui.js"></script>
    <script src="./js/xadmin.js" type="text/javascript"></script>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" onclick="location.reload()"
       style="line-height:1.6em;margin-top:3px;float:right" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                </div>
                <div class="layui-card-body ">
                    <table id="page" lay-filter="page"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script id="search" type="text/html">
    <div class="layui-input-inline">
        <input class="layui-input" id="numOrder" name="start" placeholder="输入收货人">
    </div>
    <div class="layui-input-inline">
        <button class="layui-btn" lay-event="search" >
            <i class="layui-icon">&#xe615;</i></button>
    </div>
</script>

<script id="barPerson" type="text/html">
    {{#  if(d.ifPay =="未支付"){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="sendTo">催付账单</a>
    {{#  } }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:inline="none">
    // templet: function (d) {
    //     if (d.if_pay == '0') {
    //         return '未支付';
    //     } else {
    //         return '已支付';
    //     }
    // }

    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#page'
            , url: '/orderShow'
            , page: true
            ,toolbar: '#search'
            , limit: 10 //每页默认显示的数量
            , cols: [[
                {type: 'checkbox', width: '5%'}
                , {field: 'orderId', width: '7%', title: '订单编号', sort: true}
                , {field: 'username', width: '8%', title: '收货人', edit: 'text'}
                , {field: 'phone', width: '10%', title: '手机号', edit: 'text'}
                , {field: 'email', width: '10%', title: '邮箱', edit: 'text'}
                , {field: 'price', width: '10%', title: '应付金额'}
                , {field: 'rooms', width: '5%', title: '房间人数'}
                , {field: 'hotelName', width: '10%', title: '酒店名'}
                , {field: 'ifPay', width: '5%', title: '订单状态'}
                , {field: 'startData', width: '10%', title: '开始时间', sort: true}
                , {field: 'lastData', width: '10%', title: '结束时间', sort: true}
                , {fixed: 'right', width: '10%', title: '操作', align: 'center', toolbar: '#barPerson'}
            ]]
        });
        //监听工具条
        table.on('tool(page)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    var flag = false;
                    $.ajaxSettings.async = false; //关闭异步
                    $.post("/delOrder?id=" + data.orderId, function (data) {
                        if (data == "false") {
                            flag = true;
                        }
                    });
                    if (flag) {
                        layer.msg('删除失败!', {
                            icon: 2,
                            time: 1000
                        });
                        return false;
                    }
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.msg('删除成功!', {
                        icon: 1,
                        time: 1000
                    });
                    layer.close(index);
                    //向服务端发送删除指令
                });
            }else if (layEvent === 'sendTo') {
                layer.confirm('真的发送么', function (index) {
                    $.post("/sendTo" ,{
                        orderId:data.orderId,
                        email:data.email
                    });
                    layer.msg('催款成功!', {
                        icon: 1,
                        time: 1000
                    });
                });
            }
        });
        //监听单元格编辑
        table.on('edit(page)', function (obj) {
            var data = obj.data; //得到所在行所有键值
            var flag = false;
            $.ajaxSettings.async = false; //关闭异步
            $.post("/editOrder", data, function (da) {
                if (da == 0) {
                    layer.msg('修改失败!', {
                        icon: 2,
                        time: 1000
                    });
                    flag = true;
                }
            });
            if (flag)
                return false;
            layer.msg('修改成功!', {
                icon: 1,
                time: 1000
            });
        });

        table.on('toolbar(page)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            if(obj.event == 'search'){
                if ($("#numOrder").val()!= null){
                    layui.use('table', function () {
                        var table = layui.table;
                    table.reload('page', {
                        url: '/orderSearch'
                        , where: {
                            key:$("#numOrder").val()
                        }
                        ,page: {
                            curr: 1 //重新从第 1 页开始
                        }//设定异步数据接口的额外参数
                    });
                    });
                }

                else{
                    layer.msg('编辑');
                    return false;
                }
            };

        //    换行

        });
    });

    layui.use(['laydate', 'form'],
        function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
        });



</script>

</html>